<template>
  <div
    class="view-container"
    :class="{ active: homeExample.pattern === '预览模式' }"
  >
    <!-- 画布 -->
    <view-box></view-box>
    <export-dialog ref="export"></export-dialog>
    <preiview-dialog ref="preview"></preiview-dialog>
  </div>
</template>

<script>
import viewBox from './components/viewBox.vue';
import exportDialog from './components/exportDialog.vue';
import preiviewDialog from './components/preiviewDialog.vue';
export default {
  name: 'ViewContainer',
  components: {
    viewBox,
    exportDialog,
    preiviewDialog
  },
  inject: ['homeExample'],
  methods: {
    openDialog(type) {
      this.$refs[type].showDialog();
    }
    // ...mapMutations({
    //   setComponentsList: "SET_COMPONENTS_LIST",
    //   setComponent: "SET_COMPONENT",
    //   removeComponentsList: "REMOVE_COMPONENTS_LIST",
    //   changeComponent: "CHANGE_COMPONENT",
    //   updateComponentsList: "UPDATE_COMPONENTS_LIST",
    //   changeViewType: "CHANGE_VIEWTYPE",
    // }),
  }
};
</script>

<style lang="scss" scoped>
.view-container {
  height: calc(100vh - 100px);
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  position: relative;
  #rulerTool {
    display: block !important;
  }

  .ghost {
    display: none !important;
  }
  &.active {
    padding: 0;
    border: none;
  }

  .component {
    cursor: move;
    background-color: rgb(251, 243, 243);
    padding: 10px;
  }
}
</style>
